<template>
  <div id="app">
   <h1>{{msg}}</h1>
   <h1>{{obj.name}}</h1>
   <h1 v-on:click = "niuniu">{{obj.age > 5 ? "未成年":"成年"}}</h1>
   <img :src= "msg_src" >
   <a :href="url">点击跳转到百度首页</a>
  </div>
</template>



<!-- js -->
<script>
import src from "./assets/7.png"

export default {
  data(){
    return{
      url:"http://www.baidu.com",
      msg_src:src,
      msg:"hello vue",
      obj:{
        name:"张三",
        age:18
      }
    }
  },
  methods:{
    niuniu(){
     const h1 = document.querySelectorAll("h1")
     h1.forEach(item=>{
       item.style.color = "yellow"
     })
    }
  }
}
</script>



<style>
/* 样式 */
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

h1{
  font-size: 100px;
  text-align: center;
  cursor: pointer;
}
</style>